<template>
  <div v-my-directive data-title="客服中心" class="usermain">
    <userleft></userleft>
    <div class="CatalogLayout">
      <!-- 引入文件的方式 -->
      <div class="Genericpadding bold">我的帖子</div>
      <div class="Genericpadding helf columnLayout">
        <el-scrollbar class="infinite-list" height="563px" :noresize="false" ref="scrollbarRef">
          <div class="catli" ref="reference">
            <div v-for="(item, index) in list" :key="index" :class="item.to == user.id ? ' Horizontalspacing minaxgap' : 'centerend Horizontalspacing minaxgap'">
              <el-avatar class="center" :style="item.to == user.id ? 'order: 0' : 'order: 1'" size="large" :src="item.from.Avatar" />
              <div class="catbox">
                <Reply :content="item.msg"></Reply>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <dexedi class="cat" style="border: 1px 1px 0 solid red" height="100px" width="100%" ref="child"></dexedi>
        <el-button style="margin-top: 10px" class="centerend" @click="to()">发送</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
import { dataRequest as api } from '@/api/api'
import userleft from './../components/userleft'
import dexedi from './../components/dexedi'
import Reply from './../components/Reply'
import { mapState } from 'vuex'
export default {
  components: {
    // 组件
    userleft,
    dexedi,
    Reply
  },
  computed: {
    ...mapState(['logon', 'user'])
  },
  data() {
    return {
      Height: 0,
      count: [1, 2, 3.5, 6, 7, 8, 9, 10, 1, 2, 3.5, 6, 7, 8, 9, 10],
      list: []
    }
  },
  methods: {
    async processReply() {
      this.$refs.child.setdelta('  ')
    },

    async h() {
      let JWT = await this.$indexedDB.getObject(1)
      this.socket = new WebSocket(`wss://wss.dexc.pro/wss?jwt=${JWT.JWT}`)
      // 监听连接成功建立事件

      let self = this
      this.socket.onopen = function (event) {
        // setInterval(() => {
        // 	// 发送心跳消息
        // 	this.socket.send(JSON.stringify({ type: 'heartbeat', data: 'ping' }))
        // }, 3000)
        console.log('WebSocket 连接成功建立')
      }

      // 监听连接关闭事件
      this.socket.onclose = function (event) {
        console.log('WebSocket 连接已关闭')
        self.h()
        // socket = new WebSocket('ws://13.214.142.58:14631')
      }

      // 监听连接发生错误事件
      this.socket.onerror = function (error) {
        console.error('WebSocket 连接发生错误:', error)
      }

      // 监听接收到消息事件
      this.socket.onmessage = function (event) {
        if (event.data) {
          let coner = JSON.parse(event.data)
          if (coner.from && coner.to) {
            self.list.push(JSON.parse(event.data))
          }
        }
        self.scrol()
      }
    },

    async to() {
      let value = this.$refs.child.delta()
      let delta = value[0]
      console.log(delta)
      // 如果用户
      let JWT = await this.$indexedDB.getObject(1)
      console.log(JWT.JWT)
      if (this.user.id == 60) {
        this.socket.send(JSON.stringify({ JWT: JWT.JWT, to: '51', msg: delta.ops }))
        this.list.push({ from: this.user, to: '51', msg: delta.ops })
      } else {
        this.socket.send(JSON.stringify({ JWT: JWT.JWT, to: '60', msg: delta.ops }))
        this.list.push({ from: this.user, to: '60', msg: delta.ops })
      }
      this.processReply()
      this.scrol()
    },
    scrol() {
      this.$nextTick(() => {
        if (this.$refs.reference) {
          if (this.$refs.reference.clientHeight) {
            this.Height = this.$refs.reference.clientHeight
            console.log(this.Height)
            const scrollArea = this.$refs.scrollbarRef

            scrollArea.setScrollTop(this.Height)
          }
        }
      })
    }
  },
  mounted() {
    this.h()
  }
}
</script>
<style>
	.catbox {
		border-radius: 4px;
		background-color: #ffff;
		padding: 15px;
	}
	.infinite-list {
		margin: 0;
		list-style: none;
		background-color: #f4f4f5;
		border: 1px solid #c8c9cc;
		border-bottom: 0;
	}
	.catli {
		padding: 15px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.ql-toolbar.ql-snow + .ql-container.ql-snow {
		border-bottom: 0;
	}
</style>
